<template>
	<div style="width: 100vw;height: 100vh;background-color: #f5f5f5;font-size: 0.3rem;">
		<div @click="back" style=" width: 100vw;height: 5vh;text-align: left;line-height: 5vh;">
			<van-icon name="arrow-left" size="20" />
		</div>
		<div
			style="height: 5vh;line-height: 5vh; width: 97vw;padding-left: 3vw; font-weight: bold;text-align: left;font-size: 0.4rem;">
			确认订单</div>
		<!-- 收件人 -->
		<div
			style="width: 94vw;padding-left: 2vw; height: 15vh;background-color: #fff;margin-left: 2vw;border-radius: 10px;">
			<div style="width: 96vw;display: flex;font-weight: bold;height: 4vh;line-height: 4vh;">
				<span>收件人：</span>
				<span>李敏</span>
				<span>15623658555</span>
			</div>
			<!-- 收件地址 -->
			<div style="width: 96vw;color: #ccc;display: flex;height: 6vh;">
				<div style="width: 74vw;padding-left: 2vw;text-align: left;margin-top: 1vh;">
					收件地址：北京市海淀区长春桥路126号福利院35-6-14-06</div>
				<div style="width: 20vw;">
					<van-icon name="arrow" size="20" />
				</div>

			</div>
			<!-- 支付 -->
			<div style="width: 94vw;color: yellow;text-align: left;">收获不变时，可选择暂存服务</div>
		</div>
		<!-- 订单 -->
		<div
			style="margin-top: 2vh; width: 96vw;height: 50vh;background-color: #fff;margin-left: 2vw;border-radius: 10px;">
			<div style="width: 94vw;height: 25vh;background-color: #FFFFFF;"></div>
			<div style="width: 90vw;margin-left: 4vw;text-align: left;display: flex;">
				<div style="width: 45vw;">购买数量</div>
				<div style="width: 45vw;">
					<el-input-number size="2" v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字">
					</el-input-number>
				</div>
			</div>
			<!-- 配送方式 -->
			<div style="width: 90vw;margin-left: 4vw;height: 5vh;line-height: 5vh;text-align: left;">
				配送方式
			</div>
			<div style="width: 90vw;margin-left: 4vw;height: 5vh;line-height: 5vh;text-align: left;">
				运费险
			</div>
			<div style="width: 90vw;margin-left: 4vw;height: 5vh;line-height: 5vh;text-align: left;">
				店铺优惠
			</div>
			<div style="width: 90vw;margin-left: 4vw;height: 5vh;line-height: 5vh;text-align: left;">
				订单备注
			</div>

		</div>
		<!-- 付款 -->
		<div
			style="margin-top: 2vh; width: 96vw;height: 15vh;background-color: #fff;margin-left: 2vw;border-radius: 10px;">
			<div style="width: 93vw;height: 5vh;line-height: 5vh;text-align: left;margin-left: 3vw;">花呗分期</div>
			<div style="width: 93vw;height: 5vh;line-height: 5vh;text-align: left;margin-left: 3vw;">帮我付</div>
			<div style="width: 93vw;height: 5vh;line-height: 5vh;text-align: left;margin-left: 3vw;">匿名购买</div>
		</div>
		<!-- 确认按钮 -->
		<div
			style="color: #fff;line-height: 5vh; width: 94vw;margin-left: 2vw;height: 5vh;margin-top: 1vh; background-color: black;border-radius: 10px;">
			立即购买
		</div>



	</div>
</template>

<script>
	export default {
		data() {
			return {
				num: 1
			}
		},
		methods: {
			back() {
				this.$router.go(-1)
			},
			handleChange(value) {
				console.log(value);
			}
		}
	}
</script>

<style>
</style>
